@charset "utf-8";
@import "_reset";

body {
  max-width: 750px; // min-height: 700px;
  margin: 0 auto;
  height: 100%;
  .hor {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .web {
    width: 100%;
    height: 100%;
    position: relative; // 抽奖页面开始
    background-color: #8c26c5;
    .table {
      width: 100%;
      height: 100%;
      position: absolute;
      background: url(../img/turntable_bg.jpg) no-repeat top center/100%;
      //.main_bg{
      //  width: 100%;
      //  height: 100%;
      //}
      .message {
        width: 85%;
        position: absolute;
        top: 410px;
        left: 50%;
        transform: translateX(-50%);
        color: #ffffff;
        img {
          width: 100%;
        }
        .message_con {
          position: absolute;
          top: 10px;
          width: 95%;
          text-align: center;
          font-size: 24px;
          .icon-laba {
            font-size: 30px;
          }
          .scroll {
            width: 68%;
            vertical-align: text-bottom;
            white-space: nowrap;
            overflow: hidden;
            .user_prize {
              color: #deff00;
            }
          }
        }
      }
      .turntable_tai {
        width: 89%;
        top: 1350px;
        img {
          width: 100%;
        }
        .tai {
          width: 100%;
          bottom: 0;
        }
        .si {
          width: 14.6%;
          bottom: 135px;
        }
        .rule_turn {
          width: 17.4%;
          position: absolute;
          left: 20%;
          bottom: 110px;
        }
        .prize_turn {
          width: 17.4%;
          position: absolute;
          right: 20%;
          bottom: 110px;
        }
        .time {
          font-size: 24px;
          color: #ffffff;
          position: absolute;
          bottom: 42px;
          left: 50%;
          transform: translateX(-50%);
        }
        .smallbao {
          width: 10%;
          position: absolute;
          left: 70px;
          bottom: 128px;
          z-index: 5;
        }
        .bigbao {
          width: 20.7%;
          position: absolute;
          right: 0px;
          bottom: 165px;
          z-index: 5;
        }
      }
      .turntable {
        width: 89%;
        top: 480px;
        z-index: 9;
        img {
          width: 100%;
        }
        .turntable_bg {
          width: 100%;
          top: 0;
          .light_f {
            width: 97%;
            position: absolute;
            top: 49.5%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(7deg);
          }
          .light_b {
            width: 97%;
            position: absolute;
            top: 49.5%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
        .twinkle {
          animation-name: twinkle;
          animation-duration: 1s;
          animation-timing-function: ease-in-out;
          animation-iteration-count: infinite;
          animation-direction: alternate;
        }
        @keyframes twinkle {
          0% {
            opacity: 0
          }
          100% {
            opacity: 1
          }
        }
        .backtTwinkle {
          animation-name: backtTwinkle;
          animation-duration: 1s;
          animation-timing-function: ease-in-out;
          animation-iteration-count: infinite;
          animation-direction: alternate;
        }
        @keyframes backtTwinkle {
          0% {
            opacity: 1
          }
          100% {
            opacity: 0
          }
        }
        .turntable_b {
          width: 86.8%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
        .start_button {
          width: 29.6%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        .start_head {
          width: 15%;
          position: absolute;
          left: 340px;
          top: 365px;
        }
      }
    }
    // 抽奖页面结束
    // 跳转页面开始
    .turn_page {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
      position: absolute;
      z-index: 9;
      .envelope {
        .envelope_s {
          width: 69.8%;
          position: absolute;
          left: 50%;
          top: 20%;
          img {
            width: 100%;
          }
        }
        .Rotate {
          animation-name: Rotate;
          animation-duration: 4s;
          animation-timing-function: linear;
          animation-iteration-count: infinite;
          animation-direction: normal;
        }
        @keyframes Rotate {
          0% {
            transform: translateX(-50%) rotate(0deg)
          }
          100% {
            transform: translateX(-50%) rotate(360deg)
          }
        }
        .envelope_b {
          width: 69.8%;
          top: 39%;
          border-radius: 15px;
          overflow: hidden;
          img {
            width: 100%;
          }
        }
        .envelope_main {
          width: 66%;
          height: 39%;
          position: absolute;
          left: 50%;
          top: 69%;
          transform: translate(-50%, -100%);
          overflow: hidden;
          .envelope_w {
            img {
              width: 100%;
            }
          }
          .envelope_j {
            width: 96%;
            top: 2%;
            img {
              width: 100%;
              border-radius: 10px;
            }
          }
        }
        .up {
          animation-name: up;
          animation-duration: .8s;
          animation-timing-function: linear;
          animation-direction: normal;
        }
        @keyframes up {
          from {
            height: 0%
          }
          to {
            height: 39%
          }
        }
        .envelope_f {
          width: 69.8%;
          top: 48%;
          .behind {
            width: 100%;
          }
          h2 {
            width: 66%;
            font-size: 44px;
            color: #ffe63f;
            font-weight: normal;
            letter-spacing: 4px;
            text-align: center;
            top: 40px;
          }
          p {
            width: 67.6%;
            font-size: 22px;
            color: #ffe63f;
            text-align: center;
            top: 100px;
            border-radius: 10px;
            background-color: #9847ed;
          }
          img {
            width: 28%;
            top: 140px;
          }
        }
        .coin {
          top: 20%;
          width: 82.5%;
          img {
            width: 100%;
          }
        }
        .color_bar {
          top: 22%;
          width: 80%;
          img {
            width: 100%;
          }
        }
        .down {
          animation-name: down;
          animation-duration: 2s;
          animation-timing-function: linear;
          animation-iteration-count: infinite;
          animation-direction: normal;
        }
        @keyframes down {
          0% {
            top: 22%;
          }
          50% {
            top: 26%;
            opacity: 1;
          }
          100% {
            top: 30%;
            opacity: 0;
          }
        }
        .turn_page_close {
          width: 5%;
          position: absolute;
          top: 15%;
          right: 8%;
          img {
            width: 100%;
          }
        }
      }
    }
    // 跳转页面结束
    //活动说明页面开始
    .rule {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
      position: absolute;
      z-index: 9;
      .rule_detail {
        width: 82.6%;
        background: linear-gradient(to bottom, #7b2af5, #942fe5);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 10px;
        padding: 5%;
        .rule_title {
          padding: 20px 0;
          text-align: center;
          .leftPoint,
          .rightPoint {
            display: inline-block;
            width: 13px;
            height: 13px;
            border-radius: 50%;
            background-color: white;
          }
          h1 {
            display: inline-block;
            font-size: 36px;
            color: white;
            font-weight: normal;
            padding: 0 10px;
            text-align: center;
          }
        }
        p {
          font-size: 24px;
          color: white;
          padding-bottom: 10px;
        }
        .prize_list {
          padding-bottom: 10px;
          li {
            font-size: 24px;
            color: #fff600;
          }
        }
        hr {
          width: 50%;
          height: 0;
          border: 0;
          border-bottom: 1px white dashed;
          margin-left: 0;
        }
        .statement {
          h2 {
            font-size: 18px;
            color: white;
            font-weight: normal;
            line-height: 30px;
          }
          .statement_list {
            li {
              font-size: 18px;
              color: white;
              letter-spacing: 2px;
              line-height: 30px;
            }
          }
        }
        .prob {
          h2 {
            font-size: 18px;
            color: white;
            font-weight: normal;
            line-height: 30px;
          }
          .prob_list {
            li {
              font-size: 18px;
              color: white;
              letter-spacing: 2px;
              line-height: 30px;
            }
          }
        }
      }
      .rule_close {
        width: 5%;
        position: absolute;
        top: 10%;
        right: 5%;
        img {
          width: 100%;
        }
      }
    }
    //活动说明页面结束
    // 我的奖品页面开始
    .prize {
      width: 100%;
      height: 100%;
      background: url(../img/prize_bg.png) no-repeat top/100%;
      background-color: #f0f0f0;
      position: absolute;
      z-index: 9;
      .service {
        width: 87%;
        position: absolute;
        top: 31%;
        left: 6.5%;
        font-size: 26px;
        color: white;
        text-align: center;
        background: #842cef;
        border-radius: 30px;
        line-height: 60px;
        .QQ {
          margin-right: 10%;
        }
        .icon-qie {
          font-size: 32px;
        }
        .icon-dianhua {
          font-size: 34px;
        }
      }
      .prize_con {
        width: 100%;
        position: absolute;
        top: 36.5%;
        background-color: #f0f0f0;
        .prize_juan {
          background-color: white;
          padding: 2% 0;
          margin-bottom: 0.5%;
          .juan {
            width: 27.8%;
            margin: 0 3%;
            float: left;
            img {
              width: 100%;
            }
          }
          .juan_right {
            width: 40%;
            float: left;
            .juan_con_top {
              font-size: 30px;
              margin: 5% 0;
            }
            .juan_con_bottom {
              font-size: 18px;
              margin: 7% 0;
            }
          }
          .icon-you-copy {
            font-size: 60px;
            float: right;
            margin: 3% 3% 3% 0;
          }
        }
      }
      .prize_close {
        width: 6%;
        position: absolute;
        top: 2%;
        right: 4%;
        img {
          width: 100%;
        }
      }
    }
    // 我的奖品页面结束
  }
  @media only screen and (width: 768px) and(max-height: 1024px) {
    .web {
      // 抽奖页面开始
      .table {
        .message {
          width: 65%;
          top: 385px;
          .message_con {
            font-size: 20px;
            .icon-laba {
              font-size: 20px;
            }
            .scroll {
              width: 68%;
            }
          }
        }
        .turntable_tai {
          width: 60%;
          top: 1022px;
          .si {
            bottom: 100px;
          }
          .rule_turn {
            bottom: 80px;
          }
          .prize_turn {
            bottom: 80px;
          }
          .time {
            bottom: 30px;
          }
          .smallbao {
            left: 50px;
            bottom: 95px;
          }
          .bigbao {
            bottom: 110px;
          }
        }
        .turntable {
          width: 60%;
          top: 440px;
          .start_head {
            left: 240px;
            top: 247px;
          }
        }
      }
      // 抽奖页面结束
      // 跳转页面开始
      .turn_page {
        .envelope {
          .envelope_main {
            top: 64%;
          }
        }
      }
      // 跳转页面结束
      // 活动说明页面开始
      .rule {
        .rule_detail {
          width: 68%;
        }
        .rule_close {
          top: 3%;
        }
      }
      // 活动说明页面结束
      //我的奖品页面开始
      .prize {
        .service {
          top: 40%;
        }
        .prize_con {
          top: 47%;
          .icon-you-copy {
            font-size: 60px;
          }
        }
      }
      //我的奖品页面结束
    }
  }
  @media only screen and (max-width: 480px) {
    .web {
      // 抽奖页面开始
      .table {
        .message {
          width: 85%;
          top: 270px;
          .message_con {
            font-size: 15px;
            top: 7px;
            .icon-laba {
              font-size: 20px;
            }
            .scroll {
              width: 68%;
            }
          }
        }
        .turntable_tai {
          width: 90%;
          top: 870px;
          .si {
            bottom: 80px;
          }
          .rule_turn {
            bottom: 68px;
          }
          .prize_turn {
            bottom: 68px;
          }
          .time {
            bottom: 30px;
            font-size: 15px;
          }
          .smallbao {
            left: 40px;
            bottom: 70px;
          }
          .bigbao {
            bottom: 90px;
          }
        }
        .turntable {
          width: 90%;
          top: 320px;
          .start_head {
            left: 220px;
            top: 240px;
          }
        }
      }
      // 抽奖页面结束
      // 跳转页面开始
      .turn_page {
        .envelope {
          .envelope_f {
            h2 {
              font-size: 25px;
              top: 25px;
            }
            p {
              font-size: 15px;
              top: 60px;
            }
            img {
              top: 90px;
            }
          }
        }
      }
      // 抽奖页面结束
      // 活动说明页面开始
      .rule {
        .rule_detail {
          .rule_title {
            padding: 10px 0;
            .leftPoint,
            .rightPoint {
              width: 10px;
              height: 10px;
            }
            h1 {
              font-size: 24px;
            }
          }
          p {
            font-size: 15px;
          }
          .prize_list {
            li {
              font-size: 15px;
            }
          }
          .statement {
            h2 {
              font-size: 16px;
              line-height: 20px;
            }
            .statement_list {
              li {
                font-size: 15px;
                line-height: 20px;
              }
            }
          }
          .prob {
            h2 {
              font-size: 16px;
              line-height: 20px;
            }
            .prob_list {
              li {
                font-size: 15px;
                line-height: 20px;
              }
            }
          }
        }
        .rule_close {
          top: 5%;
          right: 4%;
        }
      }
      // 活动说明页面结束
      // 我的奖品页面开始
      .prize {
        .service {
          top: 41%;
          font-size: 16px;
          line-height: 30px;
          .icon-qie {
            font-size: 18px;
          }
          .icon-dianhua {
            font-size: 20px;
          }
        }
        .prize_con {
          top: 47%;
          .prize_juan {
            .juan_right {
              .juan_con_top {
                font-size: 19px;
              }
              .juan_con_bottom {
                font-size: 14px;
              }
            }
            .icon-you-copy {
              font-size: 50px;
            }
          }
        }
        // 我的奖品页面结束
      }
    }
    @media only screen and (max-width: 414px) {
      .web {
        //抽奖页面开始
        .table {
          .message {
            top: 225px;
            .message_con {
              top: 4px;
            }
          }
          .turntable_tai {
            width: 90%;
            top: 735px;
            .si {
              bottom: 65px;
            }
            .rule_turn,
            .prize_turn {
              bottom: 58px;
            }
            .time {
              bottom: 27px;
            }
            .smallbao {
              left: 30px;
              bottom: 60px;
            }
            .bigbao {
              bottom: 75px;
            }
          }
          .turntable {
            width: 90%;
            top: 260px;
            .start_head {
              left: 190px;
              top: 205px;
            }
          }
        }
        //抽奖页面结束
        //跳转页面开始
        .turn_page {
          .envelope {
            .envelope_f {
              h2 {
                font-size: 20px;
                top: 22px;
              }
              p {
                font-size: 12px;
                top: 50px;
              }
              img {
                top: 75px;
              }
            }
          }
        }
        //跳转页面结束
        // 活动说明页面开始
        .rule {
          .rule_detail {
            .rule_title {
              padding: 5px 0;
              .leftPoint,
              .rightPoint {
                width: 8px;
                height: 8px;
              }
              h1 {
                font-size: 18px;
              }
            }
            p {
              font-size: 12px;
            }
            .prize_list {
              li {
                font-size: 12px;
              }
            }
            .statement {
              h2 {
                font-size: 13px;
                line-height: 15px;
              }
              .statement_list {
                li {
                  font-size: 13px;
                  line-height: 15px;
                }
              }
            }
            .prob {
              h2 {
                font-size: 13px;
                line-height: 15px;
              }
              .prob_list {
                li {
                  font-size: 13px;
                  line-height: 15px;
                }
              }
            }
          }
          .rule_close {
            top: 5%;
            right: 4%;
          }
        }
        // 活动说明页面结束
        // 我的奖品页面开始
        .prize {
          .service {
            top: 31%;
            font-size: 14px;
            line-height: 26px;
            .icon-qie {
              font-size: 16px;
            }
            .icon-dianhua {
              font-size: 19px;
            }
          }
          .prize_con {
            top: 35.5%;
            .prize_juan {
              .juan_right {
                .juan_con_top {
                  font-size: 17px;
                }
                .juan_con_bottom {
                  font-size: 12px;
                }
              }
              .icon-you-copy {
                font-size: 40px;
              }
            }
          }
        }
        // 我的奖品页面结束
      }
    }
    @media only screen and (max-width: 412px) and (max-height: 732px) {
      // 我的奖品页面开始
      .web {
        .prize {
          .service {
            top: 35%;
          }
          .prize_con {
            top: 40.5%;
          }
        }
        // 我的奖品页面结束
      }
    }
    @media only screen and (max-width: 376px) {
      .web {
        //抽奖页面开始
        .table {
          .message {
            width: 85%;
            top: 195px;
            .message_con {
              font-size: 12px;
              top: 7px;
              .icon-laba {
                font-size: 15px;
              }
              .scroll {
                width: 68%;
              }
            }
          }
          .turntable_tai {
            width: 90%;
            top: 665px;
            .si {
              bottom: 60px;
            }
            .rule_turn,
            .prize_turn {
              bottom: 55px;
            }
            .time {
              bottom: 25px;
              font-size: 12px;
            }
            .smallbao {
              left: 25px;
              bottom: 50px;
            }
            .bigbao {
              bottom: 55px;
            }
          }
          .turntable {
            width: 90%;
            top: 230px;
            .start_head {
              left: 170px;
              top: 185px;
            }
          }
        }
        //抽奖页面结束
        //跳转页面开始
        .turn_page {
          .envelope {
            .envelope_f {
              img {
                top: 72px;
              }
            }
          }
        }
        //跳转页面结束
        // 活动说明页面开始
        .rule {
          .rule_detail {
            .rule_title {
              padding: 5px 0;
              .leftPoint,
              .rightPoint {
                width: 8px;
                height: 8px;
              }
              h1 {
                font-size: 15px;
              }
            }
            p {
              font-size: 10px;
            }
            .prize_list {
              li {
                font-size: 10px;
              }
            }
            .statement {
              h2 {
                font-size: 10px;
                line-height: 12px;
              }
              .statement_list {
                li {
                  font-size: 10px;
                  line-height: 12px;
                }
              }
            }
            .prob {
              h2 {
                font-size: 10px;
                line-height: 13px;
              }
              .prob_list {
                li {
                  font-size: 10px;
                  line-height: 13px;
                }
              }
            }
          }
          .rule_close {
            top: 5%;
            right: 4%;
          }
        }
        // 活动说明页面结束
        // 我的奖品页面开始
        .prize {
          .service {
            top: 31%;
          }
          .prize_con {
            top: 36%;
          }
        }
        // 我的奖品页面结束
      }
    }
    @media only screen and (max-width: 370px) {
      .web {
        //抽奖页面开始
        .table {
          .message {
            width: 85%;
            top: 195px;
            .message_con {
              font-size: 12px;
              top: 7px;
              .icon-laba {
                font-size: 15px;
              }
              .scroll {
                width: 68%;
              }
            }
          }
          .turntable_tai {
            width: 90%;
            top: 650px;
            .si {
              bottom: 60px;
            }
            .rule_turn,
            .prize_turn {
              bottom: 55px;
            }
            .time {
              bottom: 25px;
              font-size: 12px;
            }
            .smallbao {
              left: 25px;
              bottom: 50px;
            }
            .bigbao {
              bottom: 55px;
            }
          }
          .turntable {
            width: 90%;
            top: 230px;
            .start_head {
              left: 170px;
              top: 185px;
            }
          }
        }
        //抽奖页面结束
      }
    }
    @media only screen and (max-width: 340px) {
      .web {
        //抽奖页面开始
        .table {
          .message {
            top: 170px;
            .message_con {
              font-size: 10px;
              top: 5px;
              .icon-laba {
                font-size: 12px;
              }
              .scroll {
                width: 68%;
              }
            }
          }
          .turntable_tai {
            width: 90%;
            top: 568px;
            .si {
              bottom: 60px;
            }
            .rule_turn,
            .prize_turn {
              bottom: 45px;
            }
            .time {
              bottom: 17px;
              font-size: 12px;
            }
            .smallbao {
              left: 25px;
              bottom: 50px;
            }
            .bigbao {
              bottom: 55px;
            }
          }
          .turntable {
            width: 90%;
            top: 200px;
            .start_head {
              left: 150px;
              top: 160px;
            }
          }
        }
        //抽奖页面结束
        //跳转页面开始
        .turn_page {
          .envelope {
            .envelope_f {
              h2 {
                font-size: 16px;
                top: 20px;
              }
              p {
                font-size: 10px;
                top: 42px;
              }
              img {
                top: 58px;
              }
            }
          }
        }
        // 跳转页面结束
        // 活动说明页面开始
        .rule {
          .rule_detail {
            .rule_title {
              padding: 3px 0;
              .leftPoint,
              .rightPoint {
                width: 8px;
                height: 8px;
              }
              h1 {
                font-size: 15px;
              }
            }
            p {
              font-size: 10px;
              padding-bottom: 5px;
            }
            .prize_list {
              padding-bottom: 5px;
              li {
                font-size: 10px;
              }
            }
            .statement {
              h2 {
                font-size: 10px;
              }
              .statement_list {
                li {
                  font-size: 10px;
                }
              }
            }
            .prob {
              h2 {
                font-size: 10px;
              }
              .prob_list {
                li {
                  font-size: 10px;
                }
              }
            }
          }
          .rule_close {
            top: 5%;
            right: 4%;
          }
        }
        // 活动说明页面结束
        // 我的奖品页面开始
        .prize {
          .service {
            font-size: 11px;
            line-height: 22px;
            .icon-qie {
              font-size: 13px;
            }
            .icon-dianhua {
              font-size: 16px;
            }
          }
          .prize_con {
            .prize_juan {
              .juan_right {
                .juan_con_top {
                  font-size: 14px;
                }
                .juan_con_bottom {
                  font-size: 10px;
                }
              }
            }
          }
        }
        // 我的奖品页面结束
      }
    }
  }
}